<template>
  <div>
    <CloudForm
      ref="ruleForm1"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol">
      <CloudFormItem label="名称" prop="name">
        <CloudInput v-model="form.name" placeholder="请输入名称"></CloudInput>
      </CloudFormItem>
      <CloudFormItem label="region" prop="region">
        <CloudSelect v-model="form.region" :allowClear="true" :options="regionList"placeholder="请选择区域"></CloudSelect>
      </CloudFormItem>
       <CloudFormItem label="时间" prop="time">
        <CloudDatePicker v-model="form.time" show-time format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" style="width: 100%;"></CloudDatePicker>
      </CloudFormItem>
      <CloudFormItem label="状态" prop="status">
        <CloudSwitch v-model="form.status"></CloudSwitch>
      </CloudFormItem>
      <CloudFormItem label="分类" prop="classify">
        <CloudCheckboxGroup :list="classifyList" v-model="form.classify"></CloudCheckboxGroup>
      </CloudFormItem>
      <CloudFormItem label="配置类型" prop="configType">
        <CloudRadioGroup :list="configTypeList" v-model="form.configType"></CloudRadioGroup>
      </CloudFormItem>
      <CloudFormItem label="描述" prop="describe">
        <CloudTextarea v-model.trim="form.describe" placeholder="请输入描述"></CloudTextarea>
      </CloudFormItem>
      <CloudFormItem :wrapper-col="{ span: 8, offset: 4 }">
        <CloudButton type="primary" @click="create">创建</CloudButton>
        <CloudButton style="margin-left: 20px;" @click="reset">重置</CloudButton>
      </CloudFormItem>
      </CloudForm>
  </div>
</template>

<script>
export default {
  title: '2.表单校验',
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 8 },
      currentTab: 'horizontal',
      tabList: [{
        key: 'horizontal',
        tab: 'horizontal'
      },
      {
        key:'vertical',
        tab: 'vertical'
      },
       {
        key:'inline',
        tab: 'inline'
      }],
      form: {
        name: "",
        region: "",
        time: "",
        status: false,
        classify: [],
        configType: "",
        describe: ""
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        region: [{ required: true, message: '请选择区域', trigger: 'change' }],
        time: [{ required: true, message: '请选择时间', trigger: 'change' }],
        classify: [
          {
            type: 'array',
            required: true,
            message: '请选择分类',
            trigger: 'change',
          },
        ],
        configType: [
          { required: true, message: '请选择配置类型', trigger: 'change' },
        ],
        describe: [{ required: true, message: '请输入描述', trigger: 'blur' }],
      },
      regionList: [
         {
          title: '川渝区',
          value: '43gfggfgfgf'
        }, {
          title: '北京区',
          value: 'tytytyytyt'
        },
         {
          title: '上海区',
          value: 'iuiuiuiuiu'
        }, {
          title: '北京区',
          value: 'tyytytytyt'
        },
      ],
      classifyList: [
        {
          title: '111',
          value: '111'
        }, {
          title: '222',
          value: '222'
        }, {
          title: '333',
          value: '333'
        }
      ],
      configTypeList: [
        {
          title: 'A',
          value: '0'
        }, {
          title: 'B',
          value: '1'
        }, {
          title: 'C',
          value: '2'
        }
      ]
    }
  },
  computed: {
    formItemLayout() {
      const { currentTab } = this;
      return currentTab === 'horizontal'
        ? {
            labelCol: { span: 2 },
            wrapperCol: { span: 10 },
          }
        : {};
    },
    btnItemLayout () {
      const { currentTab } = this;
      return currentTab === 'horizontal'
        ? {
            wrapperCol: { span: 14, offset: 2 },
          }
        : {};
    },
  },
  methods: {
     tabChange (val) {
      this.currentTab = val
    },
    btnClick1() {
      this.$cloudMessage.success('点击1');
    },
    btnClick2() {
      this.$cloudMessage.success('点击2');
    },
    submitForm(e) {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.$cloudMessage.success('submit!');
        } else {
          //console.log('error submit!!');
          return false;
        }
      });
    },
    create () {
      this.$refs.ruleForm1.validate(valid => {
        if (valid) {
          alert('提交成功了!');
        } else {
          return false;
        }
      });
    },
    reset () {
      this.$refs.ruleForm1.resetFields();
    }
  }
}
</script>

<style lang="scss">
.cloud-form {
  margin-left: 20px;
  margin-top: 12px;
}
</style>